<template>
    <div class="l-page-city-weather__current">
        <div class="c-city-weather-current city-weather-sun">
            <div class="current-weather__bg">
                <div class="current-live relative">
                    <div class="current-live__item border-box p-lr-lg p-t-sm">
                        <p class="f-r font-12">{{weatherModel.obsTime?updateTime():'木有更新捏~'}}</p>
                        <div class="current-weather icon font-48">
                            <i :class="`qi-${weatherModel.icon}-fill`"></i>
                        </div>
                        <p class="current-abstract font-24 absolute">{{weatherModel.text}}
                            {{weatherModel.temp}}℃
                        </p>
                    </div>
                </div>
                <!-- <div class="current-abstract">
                    今晚晴。明天晴，温度和今天差不多（32°），空气较差。
                </div> -->
                <div class="current-basic flex justify-content-start align-items-center font-16">
                    <div class="current-basic___item">
                        <p>
                            {{weatherModel.windDir}}
                        </p>
                        <p>
                            {{weatherModel.windScale}}级
                        </p>
                    </div>
                    <div class="current-basic___item hidden-1000">
                        <p>
                            风速
                        </p>
                        <p>
                            {{weatherModel.windSpeed}}公里
                        </p>
                    </div>
                    <div class="current-basic___item">
                        <p>湿度</p>
                        <p>{{weatherModel.humidity}}%</p>
                    </div>

                    <!-- <div class="current-basic___item hidden-1000">
                        <p>体感温度</p>
                        <p>{{weatherModel.feelsLike}}</p>
                    </div> -->
                    <div class="current-basic___item">
                        <p>能见度</p>
                        <p>{{weatherModel.vis}}公里</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchWeather, fetchLocation } from '@/api/weather/weather.js';
export default {
    name: "Weather",
    data() {
        return {
            // 密匙
            key: 'fa44c8b1e7f84860a7613da210a44cc4',
            // 地区
            location: 'tianhe',
            // 上级城市（精准定位）
            adm: 'guangzhou',
            // 返回结果数量
            number: '1',
            // 城市ID
            locationID: 0,
            weatherType: 'now',
            weatherModel: {},
        }
    },
    async created() {
        await this.fetchLocation()
        // await this.fetchWeather()
    },
    methods: {
        fetchLocation() {
            let that = this
            let params = {
                key: this.key,
                location: this.location,
                adm: this.adm,
                number: this.number,
            }
            fetchLocation(params).then(res => {
                // console.log(res, 'fetchLocation')
                if (res.code == 200 && res.location) {
                    console.log(res, res.location, 'fetchLocation')
                    that.locationID = res.location[0].id
                    // 更新天气数据
                    that.fetchWeather()
                }
                /*
                    
                */
            })
        },
        fetchWeather() {
            // await this.fetchLocation()
            // 实时，之后做切换类型
            let that = this
            let type = this.weatherType
            let params = {
                key: this.key,
                location: this.locationID,
            }
            fetchWeather(type, params).then(res => {
                // console.log(res[`${type}`])
                if (res.code == 200 && res[`${type}`]) {
                    that.weatherModel = res[`${type}`]

                }
            })
        },
        updateTime() {
            // 2022-10-23T19:23+08:00
            let type = this.weatherType
            let obsTime = this.weatherModel.obsTime
            if (type == 'now') {
                let tempTime = obsTime.substring(0, obsTime.indexOf('+'))
                // 2022-10-23T19:23
                let date = tempTime.slice(0, tempTime.indexOf(':') - 3)
                let time = tempTime.slice(tempTime.indexOf(':') - 2)
                return date + ' ' + time
            }
        }
    },
    // key=
    // https://geoapi.qweather.com/v2/city/lookup?location=tianhe&adm=guangzhou&key=fa44c8b1e7f84860a7613da210a44cc4&number=1
}
</script>

<style lang="scss">
@import '@/assets/styles/common.scss';

.l-page-city-weather__current {
    margin-top: 10px;
    padding: 0;

    .c-city-weather-current {
        width: 100%;
        border: none;
        border-radius: 16px;
        background-image: linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
        padding-bottom: 10px;

        .current-live__item {

            .current-weather {
                // display: inline-block;
                width: 80px;
                height: 70px;
                color: lightskyblue;
            }

            .current-abstract {
                // translate(4.5rem,-2.75rem)
                transform: translate(80px,-45px);
            }
        }

        .current-basic {
            margin: 0 20px;
            padding: 0 10px;
            box-sizing: border-box;
            border-radius: 8px;
            background: rgb(0, 0, 0, 0.03);
            color: #ff8c00;

            .current-basic___item {
                flex: 1;
            }

        }

    }
}
</style>

<!-- <link rel="stylesheet" type="text/css" href="@/assets/QWeather-Icons-1.1.1/font/weather-style.css"></link> -->